<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <el-button size="mini" type="primary" @click.native="submitForm">提 交</el-button>
        <el-button size="mini" @click.native="cancel(false)">取 消</el-button>
      </div>
    </div>
    <el-scrollbar :style="customeStyle">
      <el-form ref="myForm" :model="form" :label-width="labelForm.labelWidth" :label-position="labelForm.labelPosition">
        <el-row>
          <el-col :span="24">
            <el-form-item label="表名称" :prop="'TableName'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
              <el-input v-model="form.TableName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="表格显示字段" :prop="'TableBindLabel'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
              <el-input v-model="form.TableBindLabel" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="表格绑定名称" :prop="'TableBindValue'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
              <el-input v-model="form.TableBindValue" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="表格查询字段" :prop="'TableQueryField'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
              <el-input v-model="form.TableQueryField" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属场景" :prop="'SceneType'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
              <el-select v-model="form.SceneType" placeholder="请选择">
                <el-option v-for="(item,index) in sceneTypeData" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="列属性" :prop="'TableFieldProperty'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
              <el-radio-group v-model="form.TableFieldProperty">
                <el-radio v-for="(item,index) in fieldTypeData" :key="index" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否固定" :prop="'TableIsFixed'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
              <el-radio-group v-model="form.TableIsFixed">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否可查询" :prop="'TableFieldQueryEnable'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
              <el-radio-group v-model="form.TableFieldQueryEnable">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否可编辑标题" :prop="'EditLabelEnable'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
              <el-radio-group v-model="form.EditLabelEnable">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否可编辑属性" :prop="'EditPropertyEnable'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
              <el-radio-group v-model="form.EditPropertyEnable">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否可排序" :prop="'TableFieldSortEnable'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
              <el-radio-group v-model="form.TableFieldSortEnable">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="是否表单中显示" :prop="'FormShowEnabel'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
              <el-radio-group v-model="form.FormShowEnabel">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <div v-if="form.FormShowEnabel">
            <el-col :span="24">
              <el-form-item label="是否必填" :prop="'FormIsRequired'" :rules="{
                    required: true, message: '请选择', trigger: 'change'
                  }">
                <el-radio-group v-model="form.FormIsRequired">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="表单绑定字段值" :prop="'FormField'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
                <el-input v-model="form.FormField" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="表单绑定字段类型" :prop="'FormFieldType'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
                <el-select v-model="form.FormFieldType" placeholder="请选择">
                  <el-option v-for="(item,index) in formFieldTypeData" :key="index" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="表单查询字段值" :prop="'FormSelectField'" :rules="{
                    required: true, message: '请输入', trigger: 'change'
                  }">
                <el-input v-model="form.FormSelectField" placeholder="请输入" />
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="form.FormFieldType==3||form.FormFieldType==4||form.FormFieldType==5">
              <el-form-item label="表单数据来源" :prop="'FormDataFieldType'" :rules="{
                  required: true, message: '请选择', trigger: 'change'
                }">
                <el-radio-group v-model="form.FormDataFieldType">
                  <el-radio :label="1">手动输入</el-radio>
                  <el-radio :label="2">SQL语句</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.FormFieldType==3||form.FormFieldType==4||form.FormFieldType==5">
              <el-form-item label="选项内容" :prop="'FormDataField'" :rules="{
                  required: true, message: '请输入', trigger: 'change'}">
                <el-input type="textarea" :rows="5" v-model="form.FormDataField" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    getTablePage,
    saveTablePage
  } from '@/api/system/column'
  import {
    validatePhone
  } from '@/utils/validate'
  import defaultSettings from '@/settings'
  export default {
    name: 'table-edit',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      copyId: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px'
        },
        labelForm: defaultSettings.labelForm,
        form: {
          Id: 0
        },
        sceneTypeData: [],
        fieldTypeData: [],
        formFieldTypeData: [{
          value: 1,
          label: '文本'
        }, {
          value: 2,
          label: '日期时间'
        }, {
          value: 8,
          label: '日期'
        }, {
          value: 3,
          label: '单选'
        }, {
          value: 4,
          label: '多选'
        }, {
          value: 5,
          label: '复选框'
        }, {
          value: 7,
          label: '下拉树'
        }, {
          value: 6,
          label: '多行文本'
        }]
      }
    },
    created() {
      this.getData()
    },
    methods: {
      /** 查询列表 */
      getData() {
        var Id = this.Id
        if (!this.Id && this.copyId) {
          Id = this.copyId
        }
        getTablePage(Id).then(res => {
          if (res.status) {
            this.form = res.outputData.model;
            if (!this.Id && this.copyId) {
              this.form.Id = 0
            }
            this.sceneTypeData = res.outputData.typeData;
            this.fieldTypeData = res.outputData.fieldTypeData;
          }
        })
      },
      submitForm() {
        var that = this;
        this.sceneTypeData.forEach(function(item) {
          if (item.value == that.form.SceneType) {
            that.form.SceneTypeName = item.label
          }
        })
        this.fieldTypeData.forEach(function(item) {
          if (item.value == that.form.TableFieldProperty) {
            that.form.TableFieldPropertyName = item.label
          }
        })
        this.$refs['myForm'].validate(valid => {
          if (valid) {
            saveTablePage(this.form).then(res => {
              if (res.status) {
                this.$message({
                  message: this.form.Id > 0 ? '修改成功' : '新增成功',
                  type: 'success'
                })
                this.cancel(true);
              }
            })
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doCloseDetail", reload)
      }
    }
  }
</script>
